<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>借阅记录</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	{% include 'public/static_top.html' %}
	<style type="text/css">
		.book_list_1 {
			margin-top: 50px;
		}
		.borrowed {
			float: right;
			font-weight: bold;
			font-size: 1.5em;
		}
		.red {
			color: red;
		}
	</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-icon mui-icon-left-nav mui-pull-left" onclick="window.history.back(-1)"></a>
		<h1 class="mui-title">借阅记录</h1>
	</header>
	
	<div class="book_list_1">
	<ul class="mui-table-view">
        {% for book in booklist %}
		<li class="mui-table-view-cell mui-media">
			<a href="javascript:;">
				<img class="mui-media-object mui-pull-left" src="{{ book.book.cover.url }}">
				<div class="mui-media-body">
					{{ book.book.name }}
                    {% if book.status=='1' %}
					<p class='mui-ellipsis'>借书时间：{{ book.borrow_time }} <span class="borrowed red">未还</span> </p>
					<p class='mui-ellipsis red'>还书时间：{{ book.return_time }} 前 </p>
                    {% elif book.status=='2' %}
                    <p class='mui-ellipsis'>借书时间：{{ book.borrow_time }}</p>
                    <p class='mui-ellipsis'>还书时间：{{ book.return_time }} </p>
                    {% endif %}
                </div>
            </a>
        </li>
        {% endfor %}
	</ul>
	</div>
	{% include 'public/static_bottom.html' %}
	<script type="text/javascript">
		mui.init()
	</script>
</body>

</html>